<template>
	<div class="tobeDone">
		<tableIndex
			ref="tableIndexRef"
			:tableData="tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSearch="false"
			@selectChange="selectChange"
			:page="state.page"
			:fields="state.fields"
			@searchList="searchList"
			:height="500"
			@page-change="pageChange"
		>
			<template #btns>
				<div style="float: right; display: flex">
					<el-button
						size="small"
						plain
						class="button_edit"
						@click="addProjectHandler"
						><svg-icon icon-class="add-icon" /> 添加</el-button
					>

					<el-upload
						:file-list="fileList"
						ref="uploadRef"
						class="upload-demo"
						action="#"
						:http-request="update"
						:show-file-list="false"
						:on-change="handleChange"
					>
						<template #trigger>
							<el-button
								type="primary"
								size="small"
								@click="exportHandler"
								plain
								class="button_edit"
							>
								<svg-icon icon-class="export" /> 批量导入</el-button
							>
						</template>
					</el-upload>
					<!-- <el-button size="small" plain class="update"
            ><svg-icon icon-class="export" /> 批量导入</el-button
          > -->
					<el-button
						size="small"
						plain
						class="button_edit"
						@click="
							onExport({
								...getSearch(),
								projectStageId: getURLhandler(route.path).projectStageId,
							})
						"
						><svg-icon icon-class="export" /> 一键导出</el-button
					>
				</div>
			</template>
			<!-- <template #imgList="{ row }">
				<img
					:src="item.fileAddress"

					v-for="item in row.files"
					:key="item.fileAddress"
					width="100"
					height="100"
				/>
			</template> -->
			<template #operate>
				<el-table-column label="操作" width="200" align="center" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="button_view"
							type="primary"
							@click="lookHandler(row)"
							>查看</el-button
						>
						<el-button
								size="small"
								class="button_delete"
								type="primary"
								@click="delHandler(row)"
						>删除</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
		<peopleDialgo ref="lookPeople" @refreshList="getPage()"></peopleDialgo>
	</div>
</template>

<script setup>
import TableIndex from "@/components/table/index.vue";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
import { deriveHandelFnc } from "@/hooks/downCommon";
import  PeopleDialgo from "./peopleDialog.vue";
import { ref, onMounted, reactive } from "vue";
import { approachApi, deriveApi } from "@/api/project";

import { useRouter, useRoute } from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
const state = reactive({
	projectId: "",
	fields: [
		{
			key: "workerName",
			label: "人员名称",
			type: "input",
			placeholder: "人员名称关键字搜索",
		},
	],
	projectStageId: "",
	page: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
});
let route = useRoute();
const lookPeople = ref(null);
let tableData = ref([]);
const tableHead = ref([
	{
		prop: "workerName",
		label: "姓名",
		minWidth: 100,
	},
	{
		prop: "idCardNo",
		label: "身份证号",
		minWidth: 150,
		isSvg: "",
	},
	{
		prop: "bankName",
    label: "开户行",
    minWidth: 100,
	},
	{
		prop: "bankAccountNumber",
    label: "卡号",
    minWidth: 100,
	},
	{
		prop: "workerPhone",
    label: "联系电话",
    minWidth: 100,
	},
	{
		prop: "workDayCount",
    label: "工日",
    minWidth: 100,
	},
	{
		prop: "payableAmount",
    label: "应发金额",
    minWidth: 100,
	},
	{
		prop: "debitAmount",
    label: "借支",
    minWidth: 100,
	},
	{
		prop: "paidAmount",
    label: "实发金额",
    minWidth: 100,
	},
	// {
	// 	prop: "files",
	// 	label: "签字盖手印",
	// 	slot: "imgList",
	// },
	{
		prop: "createTime",
    label: "创建时间",
    minWidth: 100,
	},
	{
		prop: "createUserName",
    label: "创建人",
    minWidth: 100,
	},
]);
const exportConfig = reactive({
	fileName: "进场人员",
	apiPath: "exportPeople",
	form: {},
});
const tableIndexRef = ref(null);
//获取列表组件搜索数据
const getSearch = () => {
	return tableIndexRef.value.getSearchData();
};
const fileList = reactive([]);
const uploadRef = ref(null);


//一键导入
const exportHandler = (e) => {
	// console.log(deriveApi);
	// uploadRef.submit()
};


//字符串截取最后一个.号后面的字符串
const getSuffix = (e) => {
	let index = e.lastIndexOf(".");
	let suffix = e.substring(index + 1, e.length);
	return suffix;
};
const update = (file) => {
	let subData = new FormData();
	subData.append("file", file.file);

	deriveApi.importPeople(subData).then((res) => {
		getPage();
		if(res.code==200){
			ElMessage.success("导入成功");
		}else{
			ElMessage.error("导入失败");

		}
	});
};
const handleChange = (e) => {
	let str = getSuffix(e.name);
	console.log(str);
	if (str !== "xls" && str !== "xlsx") {
		return ElMessage.error("请上传xls格式的文件");
	}
};
const { onExport } = deriveHandelFnc(exportConfig);
const addProjectHandler = (e) => {
	lookPeople.value.state.centerDialogVisible = true;
	lookPeople.value.state.type = 0;
	lookPeople.value.state.projectId = getURLhandler(route.path).projectId;
	lookPeople.value.state.projectStageId = getURLhandler(
		route.path
	).projectStageId;
};
const selectChange = (e) => {
	console.log(e);
};
//搜索
const searchList = (e) => {
	getPage(e);
};
//分页
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;
	getPage();
};
//获取分页
const getPage = (e) => {
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		param: { ...e, projectStageId: getURLhandler(route.path).projectStageId },
	};
	approachApi.getPageList(obj).then((res) => {
		const { data, code, msg } = res;
		if (code == "200") {
			console.log(data.content);
			tableData.value = data.content;
			state.page.total = data.totalSize;
		}
	});
};
const lookHandler = (e) => {
	lookPeople.value.state.type = 1;
	lookPeople.value.state.workerId = e.workerId;
	lookPeople.value.state.centerDialogVisible = true;
};

/**
 * 删除
 * @param row
 */
const delHandler = (row) => {
	ElMessageBox.confirm(
			'确认删除吗?',
			'提示',
			{
        confirmButtonText: '确认',
        confirmButtonClass: "button_view",
				cancelButtonText: '取消',
				cancelButtonClass: "button_cancel2",
				type: 'warning',
			}
	)
			.then((res) => {
				if(res==='confirm'){
					approachApi.deletePeople({workerId:row.workerId})
							.then(res=>{
								if(res.code==='200'){
									ElMessage.success('删除成功!');
									getPage();
								}
					});
				}
			});
}

onMounted(() => {
	getPage();
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
	height: 100%;
}
.upload-demo {
	margin-left: 10px;
	margin-right: 10px;
}
.el-upload-list {
	display: none;
}
</style>
